// @use './darkUse.scss';
.main-container {
  padding:20px;
  // overflow: hidden;
}
$shadow_0010d4: 0 0 10px 0 #f2f2f2;
$shadow_004d4: 0 0 4px 0 #d4d4d4;
$shadow_004f2: 0 0 4px 0 #f2f2f2;
$shadow_042f2: 0 4px 2px 0 #f2f2f2;
// 外阴影
@mixin shadow044f2 {
  -webkit-box-shadow: 0 4px 4px 0 rgba(242, 242, 242, 0.50);
  -moz-box-shadow: 0 4px 4px 0 rgba(242, 242, 242, 0.50);
  -o-box-shadow: 0 4px 4px 0 rgba(242, 242, 242, 0.50);
  box-shadow: 0 4px 4px 0 rgba(242, 242, 242, 0.50);
}
//超出省略 单行
@mixin ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
//多行超出省略
@mixin eMore($line) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;
}
// 线性渐变
@mixin linearGradient($direction,$color1, $color2) {
  background: -webkit-linear-gradient($direction, $color1, $color2); /* Safari 5.1-6.0, Chrome 10.0+ */
  background: -moz-linear-gradient($direction, $color1, $color2); /* Firefox 3.6-15 */
  background: -o-linear-gradient($direction, $color1, $color2); /* Opera 11.1-12.0 */
  background: linear-gradient($direction, $color1, $color2); /* 标准语法 */
}
/**
 * @mixin 混入以 @include 方式使用 事例：@include omit(2);
 * 混入布局flex
 */
@mixin flexBox($direction: row, $justify: null, $align: null, $wrap: null) {
  display: -webkit-flex;
  /* 新版本语法: Chrome 21+ */

  display: -webkit-box;
  /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */

  display: -moz-box;
  /* 老版本语法: Firefox (buggy) */

  display: -ms-flexbox;
  /* 混合版本语法: IE 10 */

  display: flex;
  /* 新版本语法: Opera 12.1, Firefox 22+ */

  @if ($direction !=null) {
    -webkit-flex-direction: $direction;
    -moz-flex-direction: $direction;
    -ms-flex-direction: $direction;
    -o-flex-direction: $direction;
    flex-direction: $direction;
  }

  @if ($justify !=null) {
    -webkit-justify-content: $justify;
    -moz-justify-content: $justify;
    -ms-justify-content: $justify;
    -o-justify-content: $justify;
    justify-content: $justify;
  }

  @if ($align !=null) {
    -webkit-align-items: $align;
    -moz-align-items: $align;
    -ms-align-items: $align;
    -o-align-items: $align;
    align-items: $align;
  }

  @if ($wrap !=null) {
    -webkit-flex-wrap: $wrap;
    -moz-flex-wrap: $wrap;
    -ms-flex-wrap: $wrap;
    -o-flex-wrap: $wrap;
    flex-wrap: $wrap;
  }
}

// 绝对定位
@mixin posBox($position: absolute,
  $left: null,
  $right: null,
  $top: null,
  $bottom: null,
  $zindex: null) {
  position: $position;

  @if ($left !=null) {
    left: $left;
  }

  @if ($right !=null) {
    right: $right;
  }

  @if ($top !=null) {
    top: $top;
  }

  @if ($bottom !=null) {
    bottom: $bottom;
  }

  @if ($zindex !=null) {
    z-index: $zindex;
  }
}

// 过渡动效 $time 过渡时间
@mixin interim($time: 0.1s) {
  transition: all $time ease-in-out;
  -webkit-transition: all $time ease-in-out;
  -moz-transition: all $time ease-in-out;
  -o-transition: all $time ease-in-out;
  -ms-transition: all $time ease-in-out;
}

// 功能页按钮
.funBtn {
  // overflow: hidden;
  display: flex;
  height: 146px;

  &_item {
    @include interim(.2s);
    @include flexBox(row, center, center);
    // float: left;
    flex-shrink: 0;
    background: #fff;
    border-radius: 12px;
    margin: 0 20px 20px 0;
    padding: 30px 51px;
    border: 1px solid #fff;
    color: #333;
    cursor: pointer;

    &.disabled {
      cursor: not-allowed;
      opacity: .6;
    }

    &:hover {
      border-color: #a3d3ff;
      background: #e8f4ff;
      color: #1890ff;

      .funBtn_item_icon {
        opacity: .8;
      }
    }

    &_icon {
      @include interim(.2s);
      width: 64px !important;
      height: 64px !important;
      opacity: 1;
      margin-right: 27px;
      color: transparent;
    }

    i {
      font-style: normal;
      font-size: 16px;
    }
  }
}

// 列表样式

.mainPro {
  background: #fff;

  &_form {
    padding: 20px 0 0px 20px;

    .el-form-item {
      margin-right: 10px;
    }
  }

  .pagination-container {
    height: 50px !important;
    margin-top: 20px !important;
    padding: 0 !important;
  }
}


